<script lang="ts" setup name="TraceActivity">
import { nextTick, reactive, ref, watch } from "vue";
import ProTable from "@/components/ProTable/index.vue";
// import { getPartActivityList } from "@/api/modules/activity";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
interface DialogData {
  title: string;
  visible: boolean;
  api?: (params: any) => Promise<any>;
  id: number;
}
const dialogData = ref<DialogData>({
  title: "",
  visible: false,
  id: 0
});
const initParam = ref<any>({});
const proTableRef = ref<ProTableInstance>();
const acceptParams = (params: any) => {
  console.log(1111);

  dialogData.value = params;
  dialogData.value.visible = true;
  dialogData.value.api = params.api;
  dialogData.value.id = params.id;

  // 基础信息
  baseList[0].value = params.traceActivityInfo.promotion.typeName;
  baseList[1].value = params.traceActivityInfo.promotion.name;
  baseList[2].value = params.traceActivityInfo.promotion.startTime + " 至 " + params.traceActivityInfo.promotion.endTime;
  baseList[3].value = params.traceActivityInfo.promotion.remark;

  // 统计信息
  statisticList.value = params.traceActivityInfo.couponList;
  // 赠送类型
  giftTypeList.value = params.traceActivityInfo.point;
  // 余额
  balance.value = params.traceActivityInfo.balance;
  // 参与记录
  initParam.value.id = params.id;
  // nextTick(() => {
  //   proTableRef.value!.getTableList();
  // });
};

// 基础信息
const baseList = reactive<{ name: string; value: string }[]>([
  { name: "活动类型", value: "" },
  { name: "活动名称", value: "" },
  { name: "活动时间", value: "" },
  { name: "活动说明", value: "" }
]);
// 统计信息
interface StatisticList {
  name: string;
  count: number;
  prizeType: number;
  total: number;
  useCount: number;
}
const statisticList = ref<StatisticList[]>([]);

// 赠送类型
interface GiftTypeList {
  count: number;
  name: string;
  prizeType: number;
  total: number;
  useCount: number;
}
const giftTypeList = ref<GiftTypeList[]>([]);

// 余额
interface Balance {
  count: number;
  name: string;
  prizeType: number;
  total: number;
  useCount: number;
}
const balance = ref<Balance[]>([]);

const columns = reactive<ColumnProps[]>([
  { type: "index", width: 60 },
  { label: "客户名字", prop: "userName" },
  { label: "客户编号", prop: "number" },
  {
    prop: "mobile",
    label: "手机号",
    search: {
      label: "关键字",
      el: "input",
      key: "content"
    }
  },
  { prop: "createTime", label: "参与时间" }
  // { prop: "giftDetail", label: "礼品详情" }
]);
watch(
  () => dialogData.value.visible,
  newV => {
    if (!newV) {
      proTableRef.value!.reset();
    }
  }
);

defineExpose({
  acceptParams
});
</script>

<template>
  <div class="tranceDialog">
    <el-dialog style="padding: 20px" v-model="dialogData.visible" :title="dialogData.title" width="900">
      <div style="max-height: 550px; padding: 10px; overflow-y: auto">
        <div class="baseInfo">
          <div class="title">基础信息</div>
          <div class="content">
            <div v-for="(item, index) in baseList" :key="index" style="padding-top: 8px">
              {{ item.name }}：
              <text style="margin-left: 10px; color: #3e3e3e">{{ item.value || "暂无" }}</text>
            </div>
          </div>
        </div>

        <div class="statisticInfo" v-if="statisticList.length > 0 || giftTypeList.length > 0 || balance.length > 0">
          <div class="title">统计信息</div>
          <div style="width: 70%; margin: 10px 0" v-if="giftTypeList.length > 0">
            <el-table border :data="statisticList" v-if="statisticList.length > 0">
              <el-table-column label="序号" width="80">
                <template #default="{ $index }">
                  <div>{{ $index + 1 }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="礼品名称"></el-table-column>
              <el-table-column prop="total" label="发放数量"></el-table-column>
              <el-table-column prop="useCount" label="使用数量"></el-table-column>
            </el-table>
          </div>

          <div style="width: 70%; margin: 10px 0" v-if="giftTypeList.length > 0">
            <el-table border :data="giftTypeList">
              <el-table-column prop="name" label="赠送类型"></el-table-column>
              <el-table-column prop="total" label="累计赠送积分"></el-table-column>
              <el-table-column prop="count" label="累计赠送总次数"></el-table-column>
            </el-table>
          </div>

          <div style="width: 70%; margin: 10px 0" v-if="balance.length > 0">
            <el-table border :data="balance">
              <el-table-column prop="name" label="赠送类型"></el-table-column>
              <el-table-column prop="total" label="累计余额"></el-table-column>
              <el-table-column prop="count" label="累计赠送总次数"></el-table-column>
            </el-table>
          </div>
        </div>

        <div class="participation">
          <div class="title">参与记录</div>
          <ProTable
            :height="200"
            :init-param="initParam"
            :request-api="dialogData.api"
            pagination
            :columns="columns"
            ref="proTableRef"
          >
            <template #tableHeader>
              <el-button type="primary">查询</el-button>
              <!-- <el-button>导出</el-button> -->
            </template>
          </ProTable>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-row justify="center">
            <el-button size="large" @click="dialogData.visible = false">取消</el-button>
          </el-row>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.tranceDialog {
  .title {
    padding-left: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    border-left: 1px solid #e5b428;
  }
  .baseInfo {
    .content {
      padding-left: 100px;
      color: #8b8b8b;
    }
  }
  .statisticInfo {
    padding-top: 10px;
  }
  .participation {
    padding-top: 10px;
  }
}
</style>
